<!DOCTYPE html>
<html>
<head>
<title>Thermodynamics Diagram</title>
<style>
    body {
        margin: 20px;
        font-family: sans-serif;
    }
    canvas {
        border: 1px solid #eee;
    }
</style>
</head>
<body>

<canvas id="physicsCanvas" width="650" height="420"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// --- Style Settings ---
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 1.5;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// --- Component Coordinates ---
const heater = { x: 50, y: 125, w: 150, h: 100 };
const container = { x: 280, y: 75, w: 320, h: 200 };
const centerY = heater.y + heater.h / 2; // Central vertical axis for the beam
const slitX = heater.x + heater.w + 30;

// 1. Heater Box
ctx.font = '24px "Times New Roman"';
ctx.strokeRect(heater.x, heater.y, heater.w, heater.h);
ctx.fillText('1000 °C', heater.x + heater.w / 2, centerY);

// 2. Container Box
ctx.strokeRect(container.x, container.y, container.w, container.h);
ctx.fillText('300 K', container.x + 80, container.y + 30);

// 3. Vertical Text: 真空容器 (Vacuum Container)
ctx.font = '28px "SimSun", "KaiTi"';
const verticalText = '真空容器';
const verticalTextXPos = container.x + container.w - 40;
let verticalTextYPos = container.y + container.h / 2 - 60;
for (let i = 0; i < verticalText.length; i++) {
    ctx.fillText(verticalText[i], verticalTextXPos, verticalTextYPos + i * 35);
}

// 4. Slits
const slitHeight = 50;
ctx.beginPath();
ctx.moveTo(slitX, centerY - slitHeight / 2);
ctx.lineTo(slitX, centerY + slitHeight / 2);
ctx.moveTo(slitX + 10, centerY - slitHeight / 2);
ctx.lineTo(slitX + 10, centerY + slitHeight / 2);
ctx.moveTo(slitX + 20, centerY - slitHeight / 2);
ctx.lineTo(slitX + 20, centerY + slitHeight / 2);
ctx.stroke();

// 5. Arrow (Atomic Beam)
const arrowStartX = heater.x + heater.w;
const arrowEndX = container.x + 170;
ctx.beginPath();
ctx.moveTo(arrowStartX, centerY);
ctx.lineTo(arrowEndX, centerY);
// Arrowhead
const headlen = 20;
const headAngle = Math.PI / 9;
ctx.moveTo(arrowEndX, centerY);
ctx.lineTo(arrowEndX - headlen * Math.cos(-headAngle), centerY - headlen * Math.sin(-headAngle));
ctx.moveTo(arrowEndX, centerY);
ctx.lineTo(arrowEndX - headlen * Math.cos(headAngle), centerY - headlen * Math.sin(headAngle));
ctx.stroke();

// 6. Labels for Slit and Beam
ctx.font = '22px "SimSun", "KaiTi"';
ctx.textAlign = 'center';
// Slit Label: 准直狭缝 (Collimating Slit)
ctx.fillText('准直', slitX + 10, centerY + slitHeight / 2 + 20);
ctx.fillText('狭缝', slitX + 10, centerY + slitHeight / 2 + 45);
// Beam Label: 原子束 (Atomic Beam)
ctx.fillText('原子束', container.x + 90, centerY + 30);

// 7. Dimension Line
const dimLineY = container.y + container.h + 40;
const tickHeight = 10;
const midX = container.x + container.w / 2;
ctx.beginPath();
// Line with two arrows pointing outward from center
ctx.moveTo(midX, dimLineY);
ctx.lineTo(container.x, dimLineY);
ctx.moveTo(container.x, dimLineY);
ctx.lineTo(container.x + 10, dimLineY - 5);
ctx.moveTo(container.x, dimLineY);
ctx.lineTo(container.x + 10, dimLineY + 5);

ctx.moveTo(midX, dimLineY);
ctx.lineTo(container.x + container.w, dimLineY);
ctx.moveTo(container.x + container.w, dimLineY);
ctx.lineTo(container.x + container.w - 10, dimLineY - 5);
ctx.moveTo(container.x + container.w, dimLineY);
ctx.lineTo(container.x + container.w - 10, dimLineY + 5);
// Ticks
ctx.moveTo(container.x, dimLineY - tickHeight / 2);
ctx.lineTo(container.x, dimLineY + tickHeight / 2);
ctx.moveTo(container.x + container.w, dimLineY - tickHeight / 2);
ctx.lineTo(container.x + container.w, dimLineY + tickHeight / 2);
ctx.stroke();

ctx.font = '24px "Times New Roman"';
ctx.fillText('1 m', midX, dimLineY);

// 8. Figure Caption
ctx.font = '24px "SimSun", "KaiTi"';
ctx.textAlign = 'left';
ctx.fillText('热图 3.19.1', 180, container.y + container.h + 100);

</script>

</body>
</html>